{% extends "base.html" %}
{% import "page.html" as page %}

{% block content %}
    <div class="content-wrapper monitorDomain">
        <section class="content-header">
            <h1>
                监控域名列表
                <small>
                    {% if current_user.role.name in ['Admin', 'Ops'] %}
                        <button type="button" class="btn btn-success btn-xs" data-target=".create-domain-modal" data-toggle="modal"> 添加监控域名
                        </button>
                    {% endif %}
                </small>
            </h1>

            <!-- create-domain-modal -->
            <div class="modal fade create-domain-modal" tabindex="-1" role="dialog" aria-labelledby="domainModalLabel" aria-hidden="true">
                <div class="modal-dialog">
                    <div class="modal-content">
                        <div class="modal-header">
                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                <span aria-hidden="true">&times;</span></button>
                            <h4 class="modal-title" id="domainModalLabel">添加监控域名</h4>
                        </div>
                        <div class="modal-body">
                            <form class="form-horizontal">
                                <div class="form-group">
                                    <label for="monitorDomain" class="col-sm-3 control-label"> 监控域名 </label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="monitorDomain"
                                               placeholder="请填写正确的域名，比如：api.yala.com" v-model="domain">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="monitorDomainRDMaintainer" class="col-sm-3 control-label">业务使用人</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="monitorDomainRDMaintainer"
                                               placeholder="填写业务使用人" v-model="rd_maintainer">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="monitorDomainCREMaintainer" class="col-sm-3 control-label">运维人员</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="monitorDomainCREMaintainer"
                                               placeholder="填写运维人员" v-model="cre_maintainer">
                                    </div>
                                </div>
                                <div class="form-group">
                                    <label for="monitorDomainRemark" class="col-sm-3 control-label">备注信息</label>
                                    <div class="col-sm-9">
                                        <input type="text" class="form-control" id="monitorDomainRemark"
                                               placeholder="" v-model="remark">
                                    </div>
                                </div>
                            </form>
                            <div style="color:red;text-align:center" v-if="errMsg" v-text="errMsg"></div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                            </button>
                            <button type="button" class="btn btn-primary" @click="create_monitor_domain()">提交
                            </button>
                        </div>
                    </div>
                </div>
            </div>
            <!-- / create-domain-modal -->

            <ol class="breadcrumb">
                <li><a href="#"><i class="fa fa-dashboard"></i> Home </a></li>
                <li class="active"> 监控域名列表</li>
            </ol>
        </section>

        <!-- Main content -->
        <section class="content">
            <div class="row">
                <div class="col-xs-12">
                    <div class="box">
                        <div class="box-header">
                        </div>

                        <!-- /.box-header -->
                        <div class="box-body">
                            <!-- search -->
                            <form id="ddns_search_form" method="post" action="{{ url_for('monitor.monitor_domain_search') }}" class="row">
                                <div class="col-md-4 pull-right" style="margin-top:-10px;margin-right:5px;margin-bottom:1px">
                                    <div class="input-group">
                                        <input id="search_keyword" style="font-size: 12px" type="text" name="search" class="form-control"
                                               value="{{ search }}" placeholder="搜索"
                                               v-model="search">
                                        <span class="input-group-btn">
                                        <input type="submit" class="btn btn-info btn-search" value="搜索">
                                        </span>
                                    </div>
                                </div>
                            </form>
                            <!-- / search -->

                            <table id="domainTable" class="table table-hover">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>域名</th>
                                    <th>业务使用人</th>
                                    <th>运维</th>
                                    <th>备注</th>
                                    <th>更新时间</th>
                                    <th></th>
                                </tr>
                                </thead>

                                <tbody>
                                {% for value in domains %}
                                    <tr>
                                        <td>{{ value.id }}</td>
                                        <td>{{ value.domain }}</td>
                                        <td>{{ value.rd_maintainer }}</td>
                                        <td>{{ value.cre_maintainer }}</td>
                                        <td>{{ value.remark }}</td>
                                        <td>{{ value.update_time }}</td>
                                        {% if current_user.role.name in ['Admin', 'Ops'] %}
                                            <td>
                                                <span class="label label-warning btn-xs" style="margin-right:10px;cursor:pointer"
                                                      data-toggle="modal"
                                                      @click="modify_domain_id='{{ value.id }}',
                                                      modify_domain='{{ value.domain }}',
                                                      modify_rd_maintainer='{{ value.rd_maintainer }}',
                                                      modify_cre_maintainer='{{ value.cre_maintainer }}',
                                                      modify_remark='{{ value.remark }}',
                                                      modify_update_time='{{ value.update_time }}'"
                                                      data-target=".modify-domain-modal">编辑
                                                </span>
                                                <span
                                                        class="label label-danger btn-xs" style="margin-right:10px;cursor:pointer"
                                                        @click="show_delete_monitor_domain_modal('{{ value.id }}', '{{ value.domain }}')">删除
                                                </span>
                                            </td>
                                        {% else %}
                                            <td> </td>
                                        {% endif %}
                                    </tr>
                                {% endfor %}
                                </tbody>
                            </table>

                            <!-- modify-domain-modal -->
                            <div class="modal fade modify-domain-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel-modify" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel-modify">修改监控域名信息</h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label for="monitorDomain" class="col-sm-3 control-label">监控域名</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control" id="monitorDomain"
                                                               placeholder="" v-model="modify_domain">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="domainRDMaintainer" class="col-sm-3 control-label">业务使用人</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control" id="domainRDMaintainer"
                                                               placeholder="" v-model="modify_rd_maintainer">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="domainCREMaintainer" class="col-sm-3 control-label">运维人员</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control" id="domainCREMaintainer"
                                                               placeholder="" v-model="modify_cre_maintainer">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label for="domainRemark" class="col-sm-3 control-label">备注</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control" id="domainRemark"
                                                               placeholder="" v-model="modify_remark">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="col-sm-3 control-label" for="domainUpdateTime">更新时间</label>
                                                    <div class="col-sm-9">
                                                        <input type="text" class="form-control" id="domainUpdateTime" readonly="readonly"
                                                               placeholder="" v-model="modify_update_time">
                                                    </div>
                                                </div>
                                            </form>
                                            <div style="color:red;text-align:center" v-if="errMsg" v-text="errMsg"></div>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="modify_monitor_domain()">提交
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- / modify-domain-modal -->

                            <!-- delete-domain-modal -->
                            <div class="modal fade delete-monitor-domain-modal" tabindex="-1" role="dialog"
                                 aria-labelledby="myModalLabel4" aria-hidden="true">
                                <div class="modal-dialog">
                                    <div class="modal-content">
                                        <div class="modal-header">
                                            <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                                <span aria-hidden="true">&times;</span></button>
                                            <h4 class="modal-title" id="myModalLabel4"> 删除监控域名 </h4>
                                        </div>
                                        <div class="modal-body">
                                            <form class="form-horizontal">
                                                <div class="form-group">
                                                    <label style="text-align: center" class="col-sm-12 control-label">确认是否删除该监控域名?</label>
                                                    <label style="text-align: center" class="col-sm-12 control-label">[[ delete_domain ]]</label>
                                                </div>
                                            </form>
                                        </div>
                                        <div class="modal-footer">
                                            <button type="button" class="btn btn-default" data-dismiss="modal">关闭
                                            </button>
                                            <button type="button" class="btn btn-primary" @click="delete_monitor_domain()">删除
                                            </button>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!-- / delete-domain-modal -->

                        </div>

                        {% if pagination %}
                            <div class="pagination" style="float:right">
                                {{ page.pagination_widget(pagination,"monitor.monitor_domain",search=search) }}
                            </div>
                        {% endif %}

                    </div>
                </div>
            </div>
        </section>
    </div>

{% endblock %}

{% block bottom_js %}
    <script>
        $(function () {
            $('#domainTable').DataTable({
                'paging': false,
                'lengthChange': false,
                'searching': false,
                'ordering': true,
                'info': false,
                'autoWidth': false,
                {#'pageLength': 100#}
            })
        });

        window.onload = function () {
            if (({{ menu|tojson }}) in {
                'monitor_domain': '',
                'monitor_tcp_connect_probe': '',
            }) {
                $('#monitor').addClass('active').addClass('menu-open');
            } else {
                $('#monitor').removeClass('active').removeClass('menu-open');
            }
        };

        data = {
            domain: '',
            rd_maintainer: '',
            cre_maintainer: '',
            remark: '',
            errMsg2: '',
            modify_domain_id: '',
            modify_domain: '',
            modify_rd_maintainer: '',
            modify_cre_maintainer: '',
            modify_remark: '',
            modify_update_time: '',
            errMsg: '',
            delete_domain_id: '',
            delete_domain: '',
            errMsg3: '',
            search: ''
        };

        Vue.config.delimiters = ['[[', ']]'];

        new Vue({
            el: '.monitorDomain',
            data: data,
            methods: {
                create_monitor_domain: function () {
                    domain = this.domain;
                    rd_maintainer = this.rd_maintainer;
                    cre_maintainer = this.cre_maintainer;
                    remark = this.remark;
                    create_monitor_domain(domain, rd_maintainer, cre_maintainer, remark);
                },
                modify_monitor_domain: function () {
                    domain_id = this.modify_domain_id;
                    domain = this.modify_domain;
                    rd_maintainer = this.modify_rd_maintainer;
                    cre_maintainer = this.modify_cre_maintainer;
                    remark = this.modify_remark;
                    update_time = this.modify_update_time;
                    modify_monitor_domain(domain_id, domain, rd_maintainer, cre_maintainer, remark);
                },
                show_delete_monitor_domain_modal: function (domain_id, domain) {
                    this.delete_domain_id = domain_id;
                    this.delete_domain = domain;
                    $('.delete-monitor-domain-modal').modal('show');
                },
                delete_monitor_domain: function () {
                    delete_monitor_domain(this.delete_domain_id);
                },
            },
        });

        function create_monitor_domain(domain, rd_maintainer, cre_maintainer, remark) {
            if (!domain) {
                data.errMsg2 = '监控域名不能为空！';
                return;
            }
            if (!rd_maintainer) {
                data.errMsg2 = '业务使用人不能为空！';
                return;
            }
            if (!cre_maintainer) {
                data.errMsg2 = '运维人员不能为空！';
                return;
            }

            $.ajax({
                url: "{{ url_for('api_monitor.api_monitor_domain') }}",
                data: {
                    'domain': domain,
                    'rd_maintainer': rd_maintainer,
                    'cre_maintainer': cre_maintainer,
                    'remark': remark,
                },
                timeout: 3000,
                type: 'post',
                success: function (response) {
                    if (response.resCode === 1) {
                        swal({
                            type: 'success',
                            title: '添加成功',
                            showConfirmButton: true,
                        }).then(function () {
                            window.location.reload();
                        });
                        $('.create-domain-modal').modal('hide');
                    } else {
                        swal("添加失败", response.resMsg, "error");
                    }
                }
            })
        }

        function modify_monitor_domain(domain_id, domain, rd_maintainer, cre_maintainer, remark) {
            if (!domain_id) {
                data.errMsg = '监控域名ID不能为空！';
                return;
            }
            if (!domain) {
                data.errMsg = '监控域名不能为空！';
                return;
            }
            if (!rd_maintainer) {
                data.errMsg = '业务使用人不能为空！';
                return;
            }
            if (!cre_maintainer) {
                data.errMsg = '运维人员不能为空！';
                return;
            }

            $.ajax({
                url: "{{ url_for('api_monitor.api_monitor_domain') }}",
                data: {
                    'domain_id': domain_id,
                    'domain': domain,
                    'rd_maintainer': rd_maintainer,
                    'cre_maintainer': cre_maintainer,
                    'remark': remark,
                },
                timeout: 3000,
                type: 'put',
                success: function (response) {
                    if (response.resCode === 1) {
                        swal({
                            type: 'success',
                            title: '修改成功',
                            showConfirmButton: true,
                        }).then(function () {
                            window.location.reload();
                        });
                        $('.modify-domain-modal').modal('hide');
                    } else {
                        swal("修改失败", response.resMsg, "error");
                    }
                }
            })
        }

        function delete_monitor_domain(domain_id) {
            $.ajax({
                url: "{{url_for('api_monitor.api_monitor_domain')}}",
                data: {
                    'domain_id': domain_id,
                },
                timeout: 10000,
                type: 'delete',
                success: function (response) {
                    if (response.resCode === 1) {
                        swal({
                            type: 'success',
                            title: '删除成功',
                            showConfirmButton: false,
                            timer: 2000
                        }).then(function () {
                            window.location.reload();
                        });
                        $('.delete-monitor-domain-modal').modal('hide');
                    } else {
                        swal("删除失败", response.resMsg, "error");
                    }
                }
            })
        }
    </script>
{% endblock %}
